<template>
	<div :class="['destoon_ad_place', 'swiper', 'swiper-no-swiping', adTypeClass]" ref="swiper" v-if="isShow && adData.length > 0">
		<button v-if="isClose" @click="handleCloseAd">×</button>
		<div class="swiper-wrapper">
			<div class="swiper-slide" v-for="(item, index) in adData" :key="index">
				<a :href="item.linkAddr"><img :src="item.fileList[0].httpUrl" :alt="item.title" /></a>
			</div>
		</div>
	</div>
</template>

<script>
import moment from 'moment';
import { mapActions } from 'vuex';
import 'swiper/swiper-bundle.min.css';
import Swiper from 'swiper/swiper-bundle';
export default {
	props: ['type', 'adId'],
	data() {
		return {
			listQuery: {
				page: 1,
				limit: 5,
				status: '1'
			},
			isShow: true,
			adData: [],
			effectOptArr: [
				{
					grabCursor: true,
					effect: 'creative',
					creativeEffect: {
						prev: {
							shadow: true,
							translate: [0, 0, -400]
						},
						next: {
							translate: ['100%', 0, 0]
						}
					}
				},
				{
					grabCursor: true,
					effect: 'creative',
					creativeEffect: {
						prev: {
							shadow: true,
							translate: ['-120%', 0, -500]
						},
						next: {
							shadow: true,
							translate: ['120%', 0, -500]
						}
					}
				},
				{
					grabCursor: true,
					effect: 'creative',
					creativeEffect: {
						prev: {
							shadow: true,
							translate: ['-20%', 0, -1]
						},
						next: {
							translate: ['100%', 0, 0]
						}
					}
				},
				{
					grabCursor: true,
					effect: 'creative',
					creativeEffect: {
						prev: {
							shadow: true,
							origin: 'left center',
							translate: ['-5%', 0, -200],
							rotate: [0, 100, 0]
						},
						next: {
							origin: 'right center',
							translate: ['5%', 0, -200],
							rotate: [0, -100, 0]
						}
					}
				}
			]
		};
	},
	computed: {
		adTypeClass() {
			switch (this.type) {
				case 'banner':
					return 'banner_ad_show';
					break;
				case 'float-right':
					return 'float_right_show';
					break;
			}
		},
		isClose() {
			if (this.type === 'banner') {
				return false;
			}
			return true;
		}
	},
	watch: {
		adData(arr) {
			let index = parseInt(Math.random() * this.effectOptArr.length);
			if (arr.length === 1) return false;
			this.$nextTick(() => {
				new Swiper(this.$refs['swiper'], { autoplay: true, loop: true, ...this.effectOptArr[index] });
			});
		}
	},
	mounted() {
		this.getNewsData({ columnId: this.adId, ...this.listQuery }).then(res => {
			this.adData = !res ? [] : res.filter(item => moment(item.pubDate).isBefore(moment()));
		});
	},
	methods: {
		...mapActions(['getNewsData']),

		//关闭广告
		handleCloseAd() {
			this.isShow = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.destoon_ad_place {
	a,
	img {
		display: block;
	}
}
.banner_ad_show {
	width: 100%;
	margin-bottom: 40px;
}
.float_right_show {
	position: fixed;
	width: 240px;
	height: 128px;
	right: 10px;
	bottom: 0;
	z-index: 9;
	button {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 2;
		outline: none;
		border: none;
		background: transparent;
		font-size: 16px;
		font-family: '宋体';
		padding: 5px;
		font-weight: bold;
		cursor: pointer;
	}
	a,
	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}
</style>
